<template>
  <div class="withdrawl">
    <div class="info-box">
      <div class="title">我的零钱</div>
      <div class="balance">{{ priceFil(userInfo.balance,2) }}</div>
    </div>
    <div class="operation">
      <div class="user-info flex flex-between">
        <div class="nick-title">提现到微信账号</div>
        <div class="nick-name">{{ userInfo.nick }}</div>
      </div>
      <div class="inpunt-box flex">
        <span class="money-icon">￥</span>
        <input type="number" placeholder="请输入提现金额" v-model="money" />
      </div>
    </div>
    <div class="btn" @click="withdrawl">确定</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo:
        localStorage.userInfo && localStorage.userInfo != ""
          ? JSON.parse(localStorage.userInfo)
          : null,
      money: "",
      record: 0,
    };
  },
  created() {},
  methods: {
    withdrawl() {
      let _self = this;
      let newDate = (new Date()).getTime()
      if (newDate - this.record >= 2000) {
        this.record = new Date().getTime();
        if (this.money > this.userInfo.balance) {
          this.$toast("提现金额不能大于当前零钱余额");
          return;
        }
        if (this.money < 0.3) {
          this.$toast("提现金额不能小于0.3");
          return;
        }
        if (this.money > 5000) {
          this.$toast("提现金额不能大于5000");
          return;
        }
        this.$Api
          .extract({
            money: this.money,
          })
          .then((res) => {
            if (res.code == 1) {
              _self.getAccountUserInfo();
            } else {
              _self.$toast(res.desc);
            }
          });
      }
    },
    //获取用户信息
    getAccountUserInfo() {
      let _self = this;
      this.$Api.getAccountUserInfo().then((res) => {
        if (res.code == 1) {
          _self.$store.commit("userInfo", res.data);
          _self.$router.push("/personal_center");
          _self.$toast("提现成功");
        }
      });
    },
    priceFil: (data, num) => {
      if(data>0){
        return data.toFixed(num);
      }else{
        return "0.00"
      }
    },
  },
  filters: {
    //保留2位小数点过滤器 不四舍五入
    number(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
  },
};
</script>
<style scope>
.btn {
  position: fixed;
  bottom: 167px;
  width: 324px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  left: calc((100vw - 324px) / 2);
  border-radius: 60px;
  background-color: #f8881e;
  color: #ffffff;
  font-size: 28px;
  font-weight: bold;
}
.withdrawl {
  width: 100%;
  max-height: calc(100vh - 0.88px);
  background-color: #f8f8f8;
}
.info-box {
  width: 100%;
  height: 215px;
  padding: 37px 0 0 25px;
  box-sizing: border-box;
}
.info .title {
  font-size: 30px;
  color: #bbbbbb;
  margin-bottom: 42px;
}
.info .balance {
  font-size: 60px;
  color: #ff9a22;
}
.operation {
  width: 100%;
  background: #ffffff;
  height: calc(100vh - 303px);
  border-radius: 30px 30px 0px 0px;
  padding: 66px 30px 0 30px;
}
.operation .user-info {
  width: 100%;
  margin-bottom: 60px;
}
.operation .user-info .nick-title {
  font-size: 32px;
  color: #333333;
}
.operation .user-info .nick-name {
  font-size: 30px;
  color: #bbbbbb;
}
.inpunt-box {
  padding-bottom: 22px;
  border-bottom: 1px solid #e7e7e7;
}
.inpunt-box .money-icon {
  font-size: 80px;
  color: #333333;
  font-weight: bold;
}
.inpunt-box input {
  border: none;
  font-size: 28px;
  color: #333333;
}
.inpunt-box input::-webkit-input-placeholder {
  color: #bbbbbb;
}
</style>